Hace un tiempo vimos la forma de añadir iconos a las etiquetas del post-footer, hoy vamos a añadirle unos sencillos estilos de forma que las resaltaremos.


En edición de html marcamos para expandir la plantilla y buscamos la parte que afecta a las etiquetas.
Resaltado en negrita está la etiqueta <data:label.name/> que es la encargada de generar las etiquetas, a continuación añadiremos lo marcado en color rojo.

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><span class='etiquetas'><data:label.name/></span></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>  , </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=20&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span>

Ahí mismo podemos eliminar la coma que separa las etiquetas, está marcado con fondo negro.
Si queremos en el lugar de la coma podemos añadir algo decorativo una imagen o carácter unicode.

<span style="vertical-align: middle; color:#000; font-size:24px;text-shadow: 1px 1px 1px #505050">&#10087;</span>


Guardamos los cambios y añadimos los estilos para las etiquetas justo antes de ]]></b:skin>

.etiquetas {
padding:4px;
color:#ffffff;
opacity:0.6;
text-shadow:0 3px 2px #000000;
background:none repeat scroll 0 0 #990000;
}

.etiquetas: hover {
opacity:0.9;
}

En background cambiamos el color de fondo, el color de fuente en "color" text-shadow lo utilizamos para dar sombra el al texto y opacity para el efecto hover.
Cualquier estilo podemos añadirlo y ver el resultado o seguir cambiando.

.etiquetas {
padding:4px;
color:#ffffff;
-moz-border-radius: 5px 5px 5px 5px;
background:none repeat scroll 0 0 #990000;
text-shadow: -1px -1px 1px #555;
-moz-box-shadow: 3px 3px 3px #000000;
}
.etiquetas:hover {
opacity:0.9;
}
Unknown

Las estuve viendo, además en la cabecera se mueve el logo, me olvidé de decirte!

Te copio, te copio...buen fin de semana, besitos :)

Responder
Espartana86

¡Hola Gema!

Te vengo con petición,hehehe.

Me encantaría saber si es posible cambiar el formato de comentarios de Blogger por el de Wordpress,es decir,en vez de éste,modificarlo por ese que dice:

Nombre* Email* Url*
Comentario

¿Es posible Gema?,es que me encantaría saber si es posible realizar estos cambios,y si es posible,me encantaría que tú los explicaras,hay mucho Blogs de autoayuda,pero es que me gustas tú,hehehe,por supuesto,si quieres,claro.

¡Un besito!
:P

Responder
Gem@

:: Copia todo lo que quieras Graciela que yo también lo hago :D

:: Espartana86 mira la siguiente entrada de Vagabundia verás la forma de incluir un formulario así ;)
http://vagabundia.blogspot.com/2010/10/123-formulario-de-contacto-para-blogger.html

Responder
Isa Pavón

Hola Gema , quisiera pedirte un favor tengo un blog y me gustaría añadirle lo de subscribirse por correo electrónico como en tu blog , me lo podrías explicar , hace tiempo hiciste una entrada explicando cómo ponerlo por icono pero me gustaría ponerlo como el tuyo , muchas gracias . Conocí tu blog por el premio del 20 minutos , una cosa te lo mereces tu blog está muy bien he aprendido unas cuantas de cosas.

Responder
Espartana86

Gracias Gema ;)

Responder
Gem@

:: isa no te vayas a marear cuando veas el código que es bastante largo :S
Se añade en el interior de un gadget de html y cambias donde dice Gemablog por el nombre de tu feedburner:

<form id="fbForm" action="http://feedburner.google.com/fb/a/mailverify" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Gemablog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post"></form>

<style>

#fbForm {background: url() no-repeat scroll 10px 10px; border:0px dotted #334455; margin:-10px auto; padding:10px; width:210px;}
#fbForm a.fbSuscribe {margin: 0; padding: 1px 0 0 37px; display: block; color: #111111; font-weight: bold; font-family: verdana; font-size: 12px;}
#fbForm a.fbSuscribe:hover {color: #111111;}
#fbForm input.fbTexto {background-color: #ffffff; border: 1px dotted #111111; color: #111111; padding: 2px; height: 16px; margin-right: 5px; width: 140px;}
#fbForm input.fbBoton { background-color:#C0C0C0; border:1px dotted #990000; color:#333333; cursor:pointer; font-size:10px; height:21px; padding:1px 0 3px;}
#fbForm a.fbContador {display: block; float: right;}
</style>
<!--[if IE]>
<style>
#fbForm input.fbTexto {border: 1px solid #CCCCCC; width: 130px;}
#fbForm input.fbBoton {border:1px solid #CCCCCC; width: 50px;}
#fbForm a.fbContador {display: block; float: none; text-align: right;}
</style>
<![endif]-->

<form id="fbForm" action="http://feedburner.google.com/fb/a/mailverify" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Gemablog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post">

<p style="margin-top: 0px; margin-bottom: 0px;color:#333333;font-family:Arial;text-align: center;
font-size:80%;">Suscribirse vía mail</p>

<p style="margin-bottom: 10px;">
<input class="fbTexto" name="email" type="text" />
<input value="es_ES" name="loc" type="hidden" /><input value="Gemablog" name="uri" type="hidden" />
<input class="fbBoton" value="Subscribir" type="submit" />
</p></form>

:: Quesada es estupendo y además perdí mi reloj hace dos semanas, el reloj 7 es el que escogería pero no va a poder ser porque no hago intercambio de enlaces no estaría bien decir que no ha tantos amigos que me lo han pedido y hacer una excepción por un reloj :S

:: Espartana86 SUERTE :)

Responder
Gem@

:: isa fíjate bien que gemablog lo pone tres veces ;)

Responder
Isa Pavón

Muchas gracias , Gema , la verdad es que el código si que es para marearse...pero probaré;)...ah , y me encantan tus caritas...^^

Responder
Gem@

:: Suerte isa ;) :) :D

Responder
Admin

hola, quisiera que me ayduaras quiero agregar un widget bajo las entradas para poder colocar hay gadges como lo hago?
http://oficial-web.blogspot.com/

Responder
christian neyra

Hola rosa ,necesito ayuda ,este truco queda perfecto para darle un toque más profesional y a la vez atractivo al blog ,pero me gustaria cambiar de posición las etiquetas me aparece abajo de cada titulo de entrada junto a quién a publicado ,fecha ,comentarios y quiero que se muestre al finalizar cada entrada como lo tienes tú ,puedes darme alguns solución te lo agradeceria por favor espero respuesta saludos.
http://carlangas24game.blogspot.com/

Responder
John Mistery Doe

Hola Gema, Se podría utilizar este efecto para subrayar alguna frase dentro de un post?

Responder
Gem@

:: John Mistery Doe con el nuevo editor puedes hacerlo :D

http://gemablog-.blogspot.com/2008/07/nuevo-editor-de-blogger.html

Responder
John Mistery Doe

Hola de nuevo Gema, Quizá me explicado mal, lo que quería decir es si se podría utilizar este efecto a modo de subrayador. Para utilizarlo como alternativa para al subrayador del editor.
Queda muy bien con el sombreado y demás. :D

Aprovecho para consultarte en otra cosilla :$, en mi plantilla me aparecen las etiquetas y el “publicado Por…” debajo del titulo de la entrada y a mi me gustaría colocarlo en el post-footer junto a los botones para compartir, todo esto dentro de un recuadro de distinto color o con una imagen de fondo. Has escrito algo sobre el tema?

Saludos!

Responder
Gem@

:: John Mistery Doe con la etiqueta span podemos añadir estilos, si lo que deseas es añadirlo de vez en cuando en un post podemos hacerlo incluyendo en el mismo post los estilos:

<style>
.marcado {
padding:4px;
color:#ffffff;
-moz-border-radius: 5px 5px 5px 5px;
background:none repeat scroll 0 0 #990000;
text-shadow: -1px -1px 1px #555;
-moz-box-shadow: 3px 3px 3px #000000;
}
</style>

y donde queremos marcar el texto:
<span class="marcado">Aquí añadimos cualquier texto</span>

La otra opción es añadir los estilos en la plantilla sin la etiqueta style y así olvidarte de ellos, lo podemos añadir justo antes de ]]></b:skin>

El otro tema sombre el nombre de autor que tienes al principio de la entrada lo puedes localizar marcando para expandir la plantilla de html y buscando:

<div class="post-header-line-1">
<span class="post-author vcard">
Publicado por
<span class="fn">John Mistery Doe</span>
</span>
......
......
......
</div>

Se podría mover esa parte de:
<span class="post-author vcard">
Publicado por
<span class="fn">John Mistery Doe</span>
</span>

y ponerla justo antes de los botones del post-footer, sería cuestión de buscar algo así:

<div class="post-footer-line post-footer-line-1">
<span class="post-author vcard">
Publicado por
<span class="fn">John Mistery Doe</span>
</span>

aquí va código de los botones
......
......
......

</div>

Responder
John Mistery Doe

Muchas Gracias Gema! Eres genial. :P

Responder
Gem@

:: No hay de qué John :)

Responder
GoNanoGo

Hola Gema! El codigo me funciona muy bien, pero cuando pongo muchas etiquetas y pasan a quedar debajo, quedan pegadas. Por ejemplo, en esta entrada:

http://gonanogof1.blogspot.com/2011/03/top-10-mejores-comerciales-de-los.html

Tienes idea cual es el problema? Saludos!

Responder
Gem@

:: Pues me parece que llego tarde y las has quitado GoNanoGo pero ohhh sorpresa, añadiste mi menú favorito :D queda precioso.

Responder
GoNanoGo

No Gema, no las he quitado...fijate al final de la entrada debajo de compartir en: ...están todas pegadas las etiquetas y se ve feo...
El menú es precioso y me encanta, creo que no lo sacaré jamas, jaja

Responder
Gem@

:: Para que las estiquetas tengan más espacio abajo hay que dárselo, eso está en:
.postmeta {
font:10px Tahoma, Georgia, Arial,century gothic,verdana, sans-serif;
text-transform:uppercase;
color:#ffffff;
padding:5px 0px;
position:relative;
}

Prueba con padding: 5px 0 30px;

Luego parece que tienes dos estilos distintos para las etiquetas puedes eliminar uno y dejar el otro, uno es:
.categorys{
padding:5px 0 5px 10px;
color:#fff;
}
.categorys a:link,.categorys a:visited{
color:#CD024C;
}
.categorys a:hover{
color:#fff;
}

y el otro el que has añadido nuevo de esta entrada, si dejas este prueba añadiendo margin de forma que el primer valor es para el espacio de arriba, el segundo para la derecha, el tercero abajo y el cuarto a la izquierda.
Por ejemplo: margin:0 1px 20px 2px;

Responder
GoNanoGo

Gema:
He probado cambiar el padding pero nada. En cuanto a los estilos de etiquetas...cual me recomiendas eliminar y en donde tengo que colocarlo exactamente? Muchas gracias y perdón por la molestia, me es algo difícil dominar los códigos :D

Responder
Gem@

:: Deberías eliminar el que no estás usando de categorys y dejar los estilos que añadiste para las etiquetas tal y como las tienes ahora.
Vemos si eliminado las de categorys así se puede modificar ese padding.

Responder
Karla Castañeda

Excelente idea Gemita! ...me animaste, me animaste, pensaba resaltar toda la linea del post-footer donde están las etiquetas, pero creo que me decidiré por resaltar mejor los nombres de las etiquetas...

Un abrazo!

Responder
Furan

mil gracias por este codigo..... oye una duda.. como le hago para borrar la palabra "etiquetas:" ?
www.flaxtonstreet.blogspot.com

Responder
Furan

oh lo siento gema... acabo de descubrir como en otra entrada tuya.... pero sigo teniendo dudas... como le hago para poner los botones que tengo de "facebook y twitter" en una sola linea con los tags...?

Responder
Gem@

:: PKSPZZ! para ponerlos en la misma línea deben ir añadidos en el mismo bloque que están las etiquetas, no sé que blog estás modificando pero supongamos que las etiquetas están en
<div class='post-footer-line post-footer-line-1'>
Esa línea la encontrarás marcando para expandir la plantilla ;)

Responder
Anónimo

Gracias ! tu blog es aombroso !

Responder
Gem@

:: Thelong kane gracias!! :D

Responder
Furan

creo que ando con la cabeza revuelta!... ya diseñe bn como quiero mi blog... me encantaria que me pudieras explicar algunos puntos.

https://picasaweb.google.com/lh/photo/ZED07rj88LqpqR2GFLQiXXO1ee2kRkPq8qsitz3zNNc?feat=directlink

por el momento me gustaria poder resolver el postfooter

actualmente se ve asi: www.flaxtonstreet.blogspot.com

Gracias

Responder
Gem@

:: PKSPZZ! quieres decir sin enlaces a comentarios ni etiquetas??

Responder
Furan

No, si quiero los enlaces, me gustaria que el post footer me aparecieran en un recuadro las etiquetas (solucionado) y en otro el numero de comentarios (al igual que las etiquetas) como la imagen que deje y alineado hacia la derecha para poner en la misma linea el "me gusta" de facebook...

vuelo a dejar el link de la imagen ..
http://sj4.fi.gd

Mil gracias por contestarme :D espero que puedas ayudarme! ... C:

Responder
Halo Neptuno

Ho,a quisiera saber si podría hacer así pero solamente que se aplique al link de los comentarios.

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top